<template>
  <div class="view-container workOvertimeList">
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>流程监控</span>
        </div>
        <div class="header-form">
          <!--搜索-->

          <div class="header-form-item">
            <el-select v-model="searchForm.letterState" placeholder="状态" @change="fetchData">
              <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>

          <div class="header-form-item">
            <el-select v-model="searchForm.isCar" placeholder="是否带车" @change="fetchData">
              <el-option value="是" label="是"></el-option>
              <el-option value="否" label="否"></el-option>
            </el-select>
          </div>

        </div>
      </div>
    </header>

    <section>
      <el-table
        ref="table"
        :data="tableData"
        border
        stripe
      >
        <el-table-column prop="waiChuRenName" label="申请人" align="center" width="100"/>
        <el-table-column prop="waiChuShiYou" label="事由" align="left" >
          <template slot-scope="s">
            <el-link @click="showDetail(s.row.waiChuId)">{{s.row.waiChuShiYou}}</el-link>
          </template>
        </el-table-column>
        <el-table-column sortable prop="startTime" label="开始时间" :formatter="startTimeFmt" align="center" width="150"/>
        <el-table-column sortable prop="endTime" label="结束时间" align="center" :formatter="endTimeFmt" width="150"/>
        <el-table-column prop="isCar" label="是否带车" align="center" width="100"/>
        <el-table-column sortable prop="stateName" label="状态" align="center" width="100">
          <template slot-scope="s">
            <el-tag :type="switchType(s.row.stateName)">{{s.row.stateName}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>

<script>
  import listMixin from '@/mixin/listMixin'
  import waiChuAPI from '@/api/waiChu/waiChu'
  export default {
    name: 'JiaBanApprovalList',
    mixins:[listMixin],
    data() {
      return {
        searchForm:{
          letterState:'',
          isCar:''
        },
        stateList:[],
      }
    },
    created() {
      this.getStateList()
    },
    computed: {
    },
    methods: {
      showDetail(id){
        this.$router.push('/work-waichu/approval-detail/'+id+'/'+false)
      },
      fetchData() {
        waiChuAPI.getliuChengJianKongList(
          this.searchForm.letterState,
          this.searchForm.isCar,
          this.page.index,
          this.page.size
        ).then(res => {
          console.log('waiChuAPI.auditLists',res)
          this.tableData = res.records
          this.page.total = res.total
        })
      },

      getStateList(){
        waiChuAPI.stateList().then(res=>{
          this.stateList = res.result
        })
      },
      startTimeFmt(row){
        return this._util.format(row.startTime)
      },
      endTimeFmt(row){
        return this._util.format(row.endTime)
      }
    }
  }
</script>

<style lang="scss">
</style>

